<template>
	<view class="user-container">
		<Header :leftTitlePrimary="pageName"></Header>

		<view class="user-wrapper">
			<view class="user-header" @click="goToPage()">
				<view class="left">
					<u-avatar size="55" :src="userInfo.avater"></u-avatar>
					<view style="margin-left: 15px;">
						<u--text :text="userInfo.nickName" color="#303133" size="16"></u--text>
						<u--text :text="userInfo.phone" color="#606266" size="13" margin="5px 0px 0px"></u--text>
					</view>
				</view>
				<view class="right">
					<image src="/static/user/setting.png"></image>
					<image src="/static/user/msg.png"></image>
				</view>
			</view>

			<view class="info-wrap">
				<view class="user-info">
					<view class="items">
						<text>-</text>
						<text>关注</text>
					</view>
					<view class="items">
						<text>-</text>
						<text>粉丝</text>
					</view>
					<view class="items">
						<text>-</text>
						<text>赞和收藏</text>
					</view>
				</view>
			</view>

			<view class="question-wrapper">
				<view class="tabs">
					<u-tabs :list="tabList" :current="currentTab" lineWidth="35"
						lineColor="linear-gradient(to right, #4facfe 0%, #00f2fe 100%);" :activeStyle="{
					            color: '#303133',
					            fontWeight: 'bold',
					            transform: 'scale(1.05)'
					        }" :inactiveStyle="{
					            color: '#606266',
					            transform: 'scale(1)'
					        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 45px;">
					</u-tabs>
				</view>
				<u-empty text=" " icon="/static/empty/order.png"></u-empty>
				<view class="tips">
					<text>动态空空如也~</text>
					<text>还不快去抢占沙发</text>
					<view class="btn">
						<u-button shape="circle"
							color="linear-gradient(to left, #4facfe 0%, #00f2fe 100%);">立即发布</u-button>
					</view>
				</view>
			</view>
		</view>

		<u-popup :show="showLogin" :round="10" mode="bottom" :safeAreaInsetBottom="false" :closeable="true"
			@close="showLogin = false">
			<view class="login-wrapper">
				<button class="login-btn" @click="loginClick()">一键登录</button>

				<!-- 使用协议 -->
				<view class="agree">
					<view class="agree-text">
						<text style="color: #606266;">登录即表示已阅读并同意</text>
						<text @click="goAgreement(1)">《用户协议》</text>
						<text @click="goAgreement(2)">《隐私协议》</text>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageName: '我的',
				showLogin: false,
				status: false,
				userInfo: {
					avater: null,
					nickName: "请登录",
					phone: "登录体验更多服务"
				},
				currentTab: 0,
				tabList: [{
					id: 0,
					name: "我的动态"
				}, {
					id: 1,
					name: "我的收藏"
				}],
			}
		},
		created() {
			this.init()
		},
		methods: {
			init() {

			},
			goToPage() {
				if(this.status === false) {
					this.showLogin = true
				}				
			},
			loginClick() {
				uni.showLoading({
					title: "登录中...",
					mask: true,
					success: () => {
						uni.$u.sleep(1500).then(() => {
							this.userInfo = {
								avater: null,
								nickName: "安稳",
								phone: "13950326631"
							}

							uni.hideLoading()		
							this.showLogin = false
							
							uni.$u.toast("登录成功")
							this.status = true
						})						
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.user-container {
		.user-wrapper {
			padding: 15px 10px;

			.user-header {
				@include flex(space-between, center);
				padding: 0px 10px;

				.left {
					@include flex($align: center);
				}

				.right {
					@include flex($align: center);

					image {
						margin-left: 10px;
						width: 24px;
						height: 24px;
					}
				}
			}

			.info-wrap {
				margin: 25px 0px 10px;
				padding: 0px 10px;
			}

			.user-info {
				@include flex(space-between, center);
				padding: 25px 30px;
				border-radius: 10px;
				background: linear-gradient(to bottom right, #7d859e, #5b5f73, #454956);

				.items {
					@include flex($align: center, $direction: column);

					text {
						&:nth-child(1) {
							font-size: 16px;
							color: #ffffff;
						}

						&:nth-child(2) {
							margin-left: 3px;
							font-size: 12px;
							color: #eeeeee;
						}
					}
				}
			}

			.question-wrapper {
				padding: 0px 10px;

				.tabs {
					border-bottom: 1px solid #f0f0f0;
					margin-bottom: 20px;
				}

				.tips {
					@include flex($align: center, $direction: column);
					color: #909399;
					font-size: 12px;

					.btn {
						margin-top: 10px;
						width: 100px;
					}
				}
			}
		}

		.login-wrapper {
			@include flex(center, center, column);
			padding: 15px;
			height: 260rpx;

			.logo {
				margin: 20rpx 0px;
				height: 160rpx;
			}

			.name {
				font-size: 15px;
				color: #181818;
				text-align: center;
				font-weight: bold;
			}

			.login-btn {
				margin: 20px 0px;
				padding: 3px 0px;
				border-radius: 25px;
				width: 100%;
				background: linear-gradient(to top right, #4facfe 0%, #00f2fe 100%);
				color: #ffffff;
				font-size: 15px;
			}

			.agree {
				@include flex($align: center);

				.agree-text {
					font-size: 13px;
					color: #4facfe;
				}
			}
		}
	}
</style>